import React from 'react'

let sex = 1;
let str = "我爱你中国";
let isShow = true;
let url = "http://www.baidu.com";
let w = 100;
let imgSrc = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
let arr = [1, 2, 3, 4];
let h3 = <h3>3</h3>;
let arrVariable = [<h3>1</h3>, <h3>2</h3>, <h3>3</h3>, <h3>4</h3>];
let bookList = [
    {
        id: 1,
        bookName: "天龙八部",
        author: "金庸"
    }, {
        id: 2,
        bookName: "圆月弯刀",
        author: "古龙"
    }
];

function fn(age) {
    if (age > 80) return "老年";
    if (age > 60) return "中年";
    if (age > 35) return "青年";
    if (age > 18) return "少年";
    if (age > 12) return "儿童";
    return "婴儿";
}

export default function App() {
    return (
        /**
         * 条件渲染
         */
        // <>
        //     <p>性别：{sex === 1 ? "男" : "女"}</p>
        //     <p>{str.split("").reverse()}</p>
        //     <p>{isShow || "或"}</p>
        //     <p>{isShow && "与"}</p>
        //     <p>{fn(100)}</p>
        //     <p>{fn(50)}</p>
        // </>

        /**
         * 属性渲染
         */
        // <>
        //     <div>
        //         <a href={url}>百度</a>
        //         <img width={50} src={"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"} alt=""/>
        //         <img width="50" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""/>
        //         <img width={w} src={imgSrc} alt=""/>
        //     </div>
        // </>

        /**
         * 列表渲染
         */
        <>
            <div>
                数组可以被直接展开 ===> {arr}
            </div>

            <div>
                元素变量 ===> {h3}
            </div>

            <div>
                数组的元素设置为元素变量 ===> {arrVariable}
            </div>

            <div>
                使用map 元素的最外层属性key必须是一个唯一值。 ===>
                {
                    bookList.map((item, index) => (
                        <React.Fragment key={item.id}>
                            <h3>《{item.bookName}》----{item.author}</h3>
                            <hr/>
                        </React.Fragment>
                    ))
                }
            </div>
        </>


    )
}

